<template>
	<div class="shaixuan">
		<div class="shang">
			<p class="mmm">配送方式</p>
			<ul>
				<li class="wu" @click="change(datas.text,datas.id)">
					<img src="../assets/paixu/niao.png" class="we" v-show="nnn==true">
					<img src="../assets/paixu/gou.png" class="we" v-show="nnn==false">
					<span>{{datas.text}}</span>
				</li>
			</ul>
		</div>

		<div class="xia">
			<p class="mmm">商家属性(可以多选)</p>
			<ul class="vvv">
				<li v-for="(item,index) in shuxing" :key='index' class="kt" @click="dianji($event,item,item.id)">
					<span :style="{color: '#'+item.icon_color}" class="kt">{{item.icon_name}}</span>

					<span class="akl">{{item.name}}</span>
				</li>
			</ul>
		</div>

		<div class="foot">
			<div class="qing" @click="qk()">清空</div>
			<div class="que">确定<span>{{msg}}</span></div>
		</div>

	</div>
</template>

<script>
	export default {
		name: "shaixuan",
		data: function() {
			return {
				datas: [],
				shuxing: [],
				nnn: true,
				queding: [],
				shuju:[],
				msg:0,
			}
		},
		created: function() {
			// window.console.log(this);
			let obj = this;
			//axios 完成数据的get网络请求
			this.$axios({
					url: 'https://elm.cangdu.org/shopping/v1/restaurants/delivery_modes',
					method: 'GET',
				}).then(function(res) {
					obj.datas = res.data[0];
					// window.console.log(res.data);
				}),
				//axios 完成数据的get网络请求
				this.$axios({
					url: 'https://elm.cangdu.org/shopping/v1/restaurants/activity_attributes',
					method: 'GET',
				}).then(function(res) {
					// window.console.log(res.data);
					obj.shuxing = res.data;
				})
		},
		methods: {
			change: function(e, indexs) {
					let index = this.shuju.indexOf(indexs);
					if (index != -1) {
						//存在
						this.shuju.splice(index, 1);
					} else {
						//不存在
						this.shuju.push(indexs);
					}
					window.console.log(this.shuju)
				if (this.nnn == false) {
					this.msg--
					this.queding.splice(index, e)
				} else {
					this.msg++
					this.queding.splice(index, 0, e)
				}
				this.nnn = !this.nnn;
			},

			dianji: function(e, item,aaa) {
				let index = this.shuju.indexOf(aaa);
				if (index != -1) {
					//存在
					this.shuju.splice(index, 1);
				} else {
					//不存在
					this.shuju.push(aaa);
				}
				if (e.currentTarget.className == "kt") {
					this.msg++
					e.currentTarget.className = "skt"; //选中div样式	
					e.currentTarget.firstChild.innerHTML = "";
					e.currentTarget.firstChild.style.border = "none";
					this.queding.splice(item.id, 0, e)
				} else {
					this.msg--
					e.currentTarget.className = "kt"; //未选中div样式
					e.currentTarget.firstChild.innerHTML = item.icon_name;
					e.currentTarget.firstChild.style.border = "1px solid";
					this.queding.splice(item.id, e)
				}
				window.console.log(this.shuju)
				
			},
			
			//点击清空
			qk:function() {
				this.msg=''
				// window.console.log(e)
			},
			//确定
			qd:function(){
				
			}
			
			
			
			// qd_c() {
			// 	this.biase_c = 0
			// 	var sty = ''
			// 	for (let i = 0; i < this.queding.length; i++) {
			// 		sty += '&support_ids[]=' + this.sjsx[i]
			// 	}
			// 	this.url1 = this.url1 + sty;
			// 	this.$axios({
			// 		url: this.url1,
			// 		method: 'get',
			// 	}).then(res => {
			// 		this.dycsj = res.data;
			// 		this.fjsj = res.data;
			// 	})
			// },
			
			
		}
	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.shaixuan {
		padding-top: 4.3rem;
		background: white;
		width: 100%;
	}

	.foot {
		width: 100%;
		display: flex;
		text-align: center;
		background: rgba(0, 0, 0, 0.1);
	}

	.qing {
		border-radius: 10px;
		margin: .4rem 0;
		font-size: 1.2rem;
		width: 50%;
		margin-left: 0.3rem;
		margin-right: 1rem;
		padding: 0.5rem 0;
		background-color: #fff;
	}

	.que {
		border-radius: 10px;
		font-size: 1.2rem;
		margin: 0.4rem 0;
		width: 50%;
		padding: 0.5rem 0;
		margin-right: 0.3rem;
		background-color: #56d176;
		color: #fff;
		border: .025rem solid #56d176;
	}

	.wu {
		background: white;
		width: 6rem;
		margin-top: 0.3rem;
		margin-left: 1rem;
		height: 1.5rem;
		line-height: 1rem;
	}

	.wu span {
		padding: 0.2rem 0 0 0.5rem;
		font-size: .4rem;
		color: #333;
	}

	.mmm {
		font-size: 0.8rem;
		color: rgba(0, 0, 0, 0.7);
		padding: 0.2rem 0 0.2rem 1rem;
	}

	.shang ul li {
		border: .025rem solid #eee;
	}

	.xia {
		margin-top: 0.5rem;
	}

	.vvv {
		overflow: hidden;
	}

	.vvv li {
		float: left;
		height: 1.6rem;
		font-size: .4rem;
		color: #333;
		margin-top: 0.5rem;
		margin-left: 1rem;
		margin-bottom: 0.5rem;
		width: 5rem;
		display: inline-block;
		border: .025rem solid #eee;
		display: flex;
		justify-content: space-between;
	}

	.kt {
		border: 1px solid;
		width: 20%;
		height: 1rem;
		margin-left: 0.2rem;
		margin-top: 0.25rem;
		text-align: center;
	}

	.akl {
		width: 78%;
		padding-top: 0.2rem;
		text-align: center;
	}

	.we {
		width: 1rem;
		padding-left: 0.1rem;
		padding-top: 0.2rem;
	}

	.skt {
		width: 1rem;
		background: url(..//assets/paixu/gou.png) no-repeat;
	}
</style>
